<template>
  <div style="height:100%;width:100%;position:relative;">
      <div class="pagetop" ref="buttondiv">
          <template>
              <table style="width:100%">
                  <tr>
                      <td>仪器</td>
                      <td>
                          <rm-ddl-instrument @change="labinstrumentchange" width="200px" v-model="instrId" defaultflag="1" prgno="LIS510" :clearable="false"></rm-ddl-instrument>
                      </td>
                      <td style="align-text:right">
                          <el-button icon="el-icon-search" @click="initialList" v-has="'PINQUERY'">查询(F8)</el-button>
                          <el-button icon="el-icon-edit-outline" @click="addRecord" v-has="'PADD'">新增(F2)</el-button>
                          <el-button icon="el-icon-delete-solid" @click="deleterow()" v-has="'PDELETE'">删除(F3)</el-button>
                          <el-button type="primary" icon="el-icon-success" @click="BtnSave()">保存(F6)</el-button>
                          <el-button icon="el-icon-close" @click="BtnExc">退出(E)</el-button>
                      </td>
                  </tr>
              </table>
          </template>
      </div>
      <div class="pagecenter">
          <div ref="xTableDiv" style="height:100%;width:100%">
              <vxe-table show-overflow ref="xTable1" height="auto" width="100%" row-id="id" :loading="loading" :select-config="{reserve: true}" :data.sync="tableData1" border size="mini" :row-class-name="rowClassName" :keyboard-config="keyConfig" :mouse-config="{selected: true}" show-header-overflow highlight-current-row highlight-hover-row resizable stripe :edit-config="{trigger: 'click', mode: 'cell',showStatus: true}" @current-change="currentChangeEvent">
                  <vxe-table-column type="index" title="NO." width="50"></vxe-table-column>
                  <vxe-table-column field="seq" title="序号" width="70" sortable header-align="center" align="center" :edit-render="{name:'input'}"></vxe-table-column>
                  <vxe-table-column field="rpt_itemname" title="质控报告项目" width="170" sortable header-align="center"></vxe-table-column>
                  <vxe-table-column field="rpt_itemcode" title="质控报告项目编码" width="120" sortable header-align="center"></vxe-table-column>
                  <vxe-table-column field="uploadcode" title="上报代码" width="90" header-align="center" :edit-render="{name:'input'}"></vxe-table-column>
                  <vxe-table-column field="maxcv" v-if="qcshowmaxcv" title="允许最大CV%" width="120" header-align="center" :edit-render="{name:'input'}"></vxe-table-column>
                  <vxe-table-column field="qcruletype" title="规则大类" width="130" header-align="center" :edit-render="{type: 'default'}">
                      <template v-slot="{row}">
                          <el-select v-model="row.qcruletype">
                              <el-option v-for="item in westgardOption" :key="item.value" :label="item.label" :value="item.value">{{item.label}}</el-option>
                          </el-select>
                      </template>
                  </vxe-table-column>
                  <vxe-table-column field="inuse" title="在用" width="50" header-align="center" align="center">
                      <template v-slot="{row}">
                          <el-checkbox v-model="row.inuse" true-label="1" false-label="0" v-if="row.inuse=='1'" checked="checked" :key="1"></el-checkbox>
                          <el-checkbox v-model="row.inuse" true-label="1" false-label="0" v-else :key="0"></el-checkbox>
                      </template>
                  </vxe-table-column>

                  <vxe-table-column field="judgedt" title="最后判断时间" width="90" header-align="center" align="center" :formatter="['toDateString', 'yyyy-MM-dd']"></vxe-table-column>
                  <vxe-table-column field="judgeresult" title="最后判断结果" width="90" header-align="center" align="center" :formatter="formatterControlStatus"></vxe-table-column>
                  <vxe-table-column field="outcontroltips" title="失控提示" width="90" header-align="center"></vxe-table-column>
                  <vxe-table-column field="lastincontroldt" title="最后在控时间" width="90" header-align="center" align="center" :formatter="['toDateString', 'yyyy-MM-dd']"></vxe-table-column>
                  <vxe-table-column field="ccl_evaluation" title="临检中心质控评价" width="120" header-align="center"></vxe-table-column>
                  <vxe-table-column field="ccl_description" title="临检中心质控评价内容" width="160" header-align="center"></vxe-table-column>
              </vxe-table>
          </div>
      </div>
      <el-dialog width="1000px" top="10px" v-el-drag-dialog :append-to-body="true" destroy-on-close :close-on-click-modal="false" title="新增仪器质控项目" :visible.sync="dialogTableVisible">
          <rm-pop-selrptitem @cancel="dialogTableVisible=false" :instrid="instrIdItemList"  @selitem="addrptitem"> </rm-pop-selrptitem>
      </el-dialog>
  </div>
</template>

<script type="text/javascript">
import XE from "xe-utils";
export default {
  name: "LIS510",
  data() {
      return {
          loading: false,
          isabled: true,
          specialmodify: false,
          dialogVisible: false,
          dialogTableVisible: false,
          temprow: "",
          tempindex: 0,
          instrId: 0,
          isbis: false,
          txtsearch: "",
          rpt_itemcode: "",
          currRowIndex: 0,
          clickrow: [],
          okFirstLoading: true,
          instrIdItemList: 0,
          tableData1: [],
          tableData2: [],
          tableData3: [],
          currRow: [],
          keyConfig: {
              isArrow: true,
              isDel: true,
              isTab: true,
              isEdit: true,
              editMethod: ({ seq, row, rowIndex, column, columnIndex, cell }) => {},
          },
          sexoption: [
              { label: "所有", value: "All" },
              { label: "男", value: "1" },
              { label: "女", value: "2" },
          ],
          westgardOption: [
              { label: "Westgard", value: 1 },
              { label: "绝对值", value: 2 },
              { label: "百分比", value: 3 },
              { label: "定性质控", value: 4 },
          ],
          qcshowmaxcv: true,
      };
  },
  //html加载完成之前，执行。执行顺序：父组件-子组件
  created() {
      this.isbis = this.$tool.checkBis();
      if (this.isbis) {
          if (this.isbis) {
              this.westgardOption.push({ label: "血型鉴定", value: 11 });
              this.westgardOption.push({ label: "抗体筛查", value: 12 });
              this.westgardOption.push({ label: "交叉配血", value: 13 });
              this.westgardOption.push({ label: "接coombs", value: 14 });
          }
      }
  },
  //.html加载完成后执行。执行顺序：子组件-父组件
  mounted() {},
  updated() {
      if (this.okFirstLoading) {
          let currentrow = this.$refs.xTable1.getData(0);
          this.currRow = currentrow;
          if (currentrow) {
              this.okFirstLoading = false;
              this.$refs.xTable1.setCurrentRow(currentrow);
          }
      }
  },
  watch: {
      instrId(val) {
          this.initialList();
      },
  },
  methods: {
      formatterControlStatus({ cellValue }) {
          return cellValue === "1" ? "在控" : cellValue === "0" ? "失控" : "";
      },

      getSelectLabel(value, list, valueProp = "value", labelField = "label") {
          // let item = this.$utils.find(list, item => item[valueProp] === value);
          for (let index in list) {
              if (list[index].value == value) {
                  return list[index].label;
              }
          }
          return null;
      },

      initialList() {
          //主表查询
          this.loading = true;
          this.$tool
              .request({
                  url: "LIS/LIS5/LIS510",
                  method: "post",
                  data: {
                      action: "query",
                      instrid: this.instrId,
                  },
              })
              .then((response) => {
                  console.log("🤣 ~ response", response);
                  this.qcshowmaxcv = response.qcshowmaxcv == "0" ? false : true;
                  response.RData.Data.forEach((item) => {
                      response.RData.Cols.forEach((item1) => {
                          var field = item1.field;

                          if (item[field] == null) {
                              item[field] = "";
                          }
                      });
                  });
                  this.tableData1 = response.RData.Data;
                  this.tableData1.sort((a, b) => {
                      return a.seq - b.seq;
                  });
                  this.loading = false;
                  this.okFirstLoading = true;
              })
              .catch((e) => {
                  this.loading = false;
                  console.log("error", e);
              });
      },

      rowClassName({ row, rowIndex }) {
          if (row.inuse == "0") {
              return "rm-alert";
          }
      },

      labinstrumentchange(id, name) {
          this.instrId = id;
          this.initialList();
      },

      currentChangeEvent({ row, $rowIndex }) {
          if (this.specialmodify) {
              this.dialogVisible = true;
              this.temprow = row;
              this.tempindex = $rowIndex;
          } else {
              this.handchangerow(row, $rowIndex);
          }
      },
      handchangerow(row, $rowIndex) {
          this.currRow = row;
          this.currRowIndex = $rowIndex;
          this.rpt_itemcode = row.rpt_itemcode;
      },

      addrptitem(rptitemcodeinfos) {
          var seq = 0;
          var seqk = 0;
          var ishave = false;
          var datarecord = this.$refs.xTable1.tableData;
          let initdata = [];
          for (var i = 0; i < rptitemcodeinfos.length; i++) {
              if (datarecord.length > 0) {
                  try {
                      datarecord.forEach((item) => {
                          if (item.rpt_itemcode == rptitemcodeinfos[i].rpt_itemcode) {
                              ishave = true;
                              throw Error();
                          } else {
                              ishave = false;
                          }
                          if (Number(item.seq) / 10 > seq) {
                              seq = Number(item.seq) / 10;
                          }
                      });
                  } catch (e) {}
              }
              if (ishave) {
                  continue;
              }
              seq++;
              seqk = seq * 10;
              let addrecord = {
                  seq: seqk,
                  rpt_itemname: rptitemcodeinfos[i].rpt_itemname,
                  rpt_itemcode: rptitemcodeinfos[i].rpt_itemcode,
                  uploadcode: "",
                  maxcv: "",
                  qcruletype: 1, //Westgard
                  inuse: "1", //在用
                  judgedt: "",
                  judgeresult: "",
                  outcontroltips: "",
                  lastincontroldt: "",
                  ccl_evaluation: "",
                  ccl_description: "",
              };
              initdata.push(addrecord);
          }
          this.$refs.xTable1.insert(initdata);
          this.dialogTableVisible = false;
      },
      addRecord(e) {
          //弹出新增框
          if (this.instrId == 0) {
              this.$message("请选择仪器");
              return false;
          }
          // shift 被按下
          if (e.shiftKey) {
              this.instrIdItemList = 0; //列出全部itemcode
          } else {
              this.instrIdItemList = XE.toInteger(this.instrId); //列出本仪器的项目
          }
          this.dialogTableVisible = true;
      },
      BtnSave() {
          if (this.instrId == 0) {
              this.$message("请选择仪器");
              return false;
          }
          let xTable1date = this.$refs.xTable1.getTableData();
          this.$tool
              .request({
                  url: "LIS/LIS5/LIS510",
                  method: "post",
                  data: {
                      action: "save",
                      instrId: this.instrId,
                      urec: xTable1date.fullData,
                  },
              })
              .then((response) => {
                  if (response.errcode == "1") {
                      this.$message({
                          message: "操作成功！",
                          type: "success",
                      });
                      this.initialList();
                      this.specialmodify = false;
                  } else {
                      this.$message({
                          dangerouslyUseHTMLString: true,
                          message: "保存失败！<br><br>详细信息：" + response.errmsg,
                          type: "warning",
                      });
                  }
              });
      },
      deleterow() {
          var delrow = this.$refs.xTable1.getCurrentRow();
          var currRowIndex = this.currRowIndex;
          var allrow = this.$refs.xTable1.getTableData().fullData.length;
          if (delrow) {
              this.$refs.xTable1.remove(delrow);
              if (allrow > 1) {
                  if (allrow > currRowIndex + 1) {
                      this.$refs.xTable1.setCurrentRow(this.$refs.xTable1.getTableData().fullData[currRowIndex]);
                  } else {
                      this.$refs.xTable1.setCurrentRow(this.$refs.xTable1.getTableData().fullData[allrow - 2]);
                  }
              }
          } else {
              this.$message({
                  message: "请先选中要删除的数据！",
                  type: "warning",
              });
          }
      },
      //关闭按钮
      BtnExc() {
          let index = this.$parent.$refs.itemtags.tagsList.findIndex((m) => m.name == "LIS510");
          this.$parent.$refs.itemtags.tagsList.splice(index, 1);
          this.$router.go(-1);
      },
  },
  beforeRouteEnter(to, from, next) {
      next((vm) => {
          let that = vm;
          let altArr = [];
          document.onkeydown = function (e) {
              let key = window.event.keyCode;
              console.log("key=", key);
              //*组合按键
              if (altArr.length > 0) {
                  //65到90 a到z（A到Z）
                  // //*Alt + C 清除
                  // if (key == 69) {
                  //     this.BtnExc();
                  // }
                  //*Alt + E 退出
                  if (key == 69) {
                      that.BtnExc();
                  }
              } else {
                  if (key == 119) {
                      //F8
                      that.initialList();
                  } else if (key == 113) {
                      //F2
                      var e = [];
                      e.shiftKey = false;
                      that.addRecord(e);
                  } else if (key == 114) {
                      //F3
                      that.deleterow();
                  } else if (key == 117) {
                      //F6
                      that.BtnSave();
                  } else if (key == 18) {
                      console.log("按下'ALT'");
                      //按下了alt
                      altArr.push(key);
                  }
              }
          };
          document.onkeyup = function (e) {
              let key = window.event.keyCode;
              if (key == 18) {
                  altArr = [];
              }
          };
      });
  },
};
</script>

<style scoped>
.pagetop {
  left: 0;
  right: 0;
  height: 33px;
  display: -webkit-box;
  -webkit-box-pack: left;
  -webkit-box-align: center;
  border: solid 1px #ccc;
  position: absolute;
  z-index: 99;
  text-align: left;
}
.pagebottom {
  width: 100%;
  height: 40px;
  display: -webkit-box;
  -webkit-box-pack: left;
  -webkit-box-align: left;
  position: absolute;
  bottom: 0px;
  font-size: 12px;
  border: solid 1px #ccc;
}
.pagecenter {
  position: absolute;
  top: 40px;
  width: 100%;
  left: 0;
  bottom: 0px;
  overflow: auto;
}
.middle-center {
  position: absolute;
  height: 100%;
  right: 485px;
  left: 0;
}

.middle-right {
  position: absolute;
  top: 0;
  bottom: 2px;
  overflow: visible;
  width: 480px;
  right: 0px;
}
table tr td:nth-child(odd) {
  text-align: right;
  white-space: nowrap;
}
table tr td:nth-child(even) {
  text-align: left;
}
table tr td:nth-child(1) {
  width: 80px;
}
table {
  font-size: 12px;
}
</style>
